<template>
  <div class="main">
    <div class="top">
      <div class="search">
        <el-input
          size=""
          placeholder="请输入内容"
          v-model="input3"
          class="input-with-select"      
        >
          <el-button slot="append" > 查询</el-button>
        </el-input>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <span class="title">热榜一</span>
        <ul>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
        </ul>
      </div>
      <div class="right">
        <span class="title">热榜二</span>
        <ul>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
          <li>这是一个热点排行榜的内容</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    input3:''
  }
}
}
</script>

<style scoped>
.main{
  height: 800px;
}
.top{
  width: 1200px;
  height: 150px;
  background-color: #fff;
  display: flex;
  box-shadow: 0px 0px 8px 0px #e5e5e5;
  justify-content: center;
  align-items: center;
}
.search{
  width: 600px;
  height: 60px;
}
.search :deep(.el-input__inner){
  height: 50px;
}
.search :deep(.el-input-group__append)  {
  width: 60px;
  background-color: #58a0ff;
  color: #fff;
}
.bottom{
  margin-top: 100px;
  width: 1200px;
display: flex;
justify-content: space-evenly;
}
.left{
  width: 550px;
  height: 400px;
  box-shadow: 0px 0px 8px 0px #e5e5e5;
  display: flex;
  flex-direction: column;
}
.right{
  width: 550px;
  height: 400px;
  box-shadow: 0px 0px 8px 0px #e5e5e5;
  display: flex;
  flex-direction: column;

}
li{
  margin-top: 20px;
}
.title{
  margin-left: 100px;
}
</style>